<template>
	<view class="authorize">
		<view class="authorize-block" v-if="isOpen">
			<view class="authorize-background"></view>
			<view class="authorize-layer">
				<view class="avatar"><open-data type="userAvatarUrl"></open-data></view>
				<view class="remarks">小程序申请获取</view>
				<view class="intro">您的公开信息（昵称、头像等）</view>
				<view class="agree">
					<view class="agree-btn" @click="bindAgreeAuthorizeTap">同意</view>
				</view>
				<view class="agreement">
					<text>同意即表示已阅读并接受</text>
					<text class="agreement-name" @click="bindPrivacyProtectionAgreementTap">《隐私保护协议》</text>
				</view>
				<view class="close">
					<view class="close-btn" @click="bindCloseAuthorizeTap"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"m-authorize",
		data() {
			return {
				isOpen: false,
			};
		},
		props: {
			open: {
				type: Boolean,
				default: false
			},
		},
		mounted() {
			this.isOpen = this.open;
		},
		watch: {
			open(){
				this.isOpen = this.open;
			},
		},
		methods: {
			bindPrivacyProtectionAgreementTap(){
				uni.navigateTo({
					url: '/pages/mine/agreement',
				});
				return false;
			},
			authorizeHidden(open){
				this.isOpen = open;
			},
			bindCloseAuthorizeTap(){
				this.authorizeHidden(false);
			},
			async bindAgreeAuthorizeTap(){
				let userProfileResult = await new Promise(resolve => {
				    wx.getUserProfile({
				        lang: 'zh_CN',
				        desc: '使用您的用户信息登录平台',
				        success(res) {
				            resolve(res);
				        },
				        fail() {
				            resolve(false);
				        }
				    });
				});
				if (userProfileResult === false) {
				    uni.showToast({title: '您拒绝了微信授权', icon: 'none'});
				    return false;
				}
				if (!userProfileResult.userInfo) {
				    uni.showToast({title: '获取授权信息失败', icon: 'none'});
				    return false;
				}
				let userinfo = userProfileResult.userInfo;
				let loginResult = await new Promise(resolve => {
				    uni.login({
				        provider: 'weixin',
				        success: function (res) {
				            resolve(res);
				        },
				        fail() {
				            resolve(false);
				        }
				    });
				});
				let loginCode = loginResult ? loginResult.code : false;
				if(loginCode === false){
					uni.showToast({title: '微信登录失败', icon: 'none'});
					return false;
				}
				userinfo.code = loginCode;
				let response = await this.http({
					url: 'login/wechat',
					method: 'post',
					data: userinfo
				});
				if(response.status === 0 && response.msg === 'ok'){
					this.$store.commit('login', response.result);
					this.authorizeHidden(false);
				}
			},
		}
	}
</script>

<style lang="scss">
	.authorize {
		.authorize-block{
			position: fixed;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			z-index: 99;
			display: flex;
			align-items: center;
			justify-content: center;
			.authorize-background {
				position: fixed;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				z-index: 998;
				background-color: rgba(0, 0, 0, .5);
			}
			.authorize-layer{
				width: 70%;
				padding: 48rpx 0;
				text-align: center;
				position: relative;
				z-index: 999;
				background-color: #fff;
				border-radius: 20rpx;
				margin: 0 40rpx;
				.avatar{
					width: 150rpx;
					height: 150rpx;
					margin: auto;
					border-radius: 50%;
					overflow: hidden;
				}
				.remarks{
					padding: 30rpx 0 0 0;
					font-size: 28rpx;
					font-weight: bold;
					color: #202023;
				}
				.intro{
					padding: 30rpx 0 0 0;
					font-size: 24rpx;
					color: #999;
				}
				.agree{
					padding: 40rpx 0 0 0;
					display: flex;
					align-items: center;
					justify-content: center;
					.agree-btn{
						display: flex;
						align-items: center;
						justify-content: center;
						width: 400rpx;
						height: 88rpx;
						border-radius: 88rpx;
						background-color: #4EB9FF;
						color: #fff;
						font-size: 28rpx;
					}
				}
				.agreement{
					padding: 60rpx 0 0 0;
					font-size: 24rpx;
					color: #202023;
					text-align: center;
					.agreement-name{
						color: #51A8FF;
					}
				}
				.close{
					position: absolute;
					bottom: -136rpx;
					left: 0;
					z-index: 999;
					width: 100%;
					height: 136rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					.close-btn{
						width: 60rpx;
						height: 60rpx;
						border: 2rpx solid #fff;
						border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
						position: relative;
						&::before{
							content: '';
							height: 4rpx;
							width: 65%;
							position: absolute;
							transform: rotate(45deg);
							background-color: #fff;
						}
						&::after{
							content: '';
							height: 4rpx;
							width: 65%;
							position: absolute;
							transform: rotate(135deg);
							background-color: #fff;
						}
					}
				}
			}
		}
	}
</style>
